import React from 'react'
import Code from './Code'
import { Link, Table, Button } from '../ui-components'
import style from './style'
import cx from 'classnames'

const TableTest = props => (
	<div className={cx({
		[style.root]: true
	})}>
		<Code>{'<Table config={..} map={..} model={..} data={[..]}/>'}</Code>
		<div style={{width: '900px'}}>
			<Table
				sortUpdate={(obj) => {console.log(obj)}}
				sortable={field => field.name !== '张三'}
        config={{gender: .3, age: .3}}
        map={{gender: value => <Link to="#/test">{value}</Link>}}
        pagin={
          {
            totalNumber: 10,
            pageSize: 2,
            onChange: pageNumber=> props.router.push(`/table?pageNumber=${pageNumber}`),
            ...props.location.query
          }
        }
        model={{name: '姓名', age: '年龄', gender: '性别'}}
				data={
					[
						{name: '张三', age: 10, gender: '男'}, 
						{name: '李A', age: 20, gender: '女'},
						{name: '李B', age: 22, gender: '女'},
						{name: '李C', age: 24, gender: '女'}
					]
				}
			>
        <Button label="打包下载"/>
        <Button label="打包下载"/>
			</Table>
		</div>
	</div>
)

export default TableTest
